.main{
  margin-top: 60px;
  padding: 40px;
}
/* The navigation bar */
.navbar {
  overflow: hidden;
 background-color: #fff; 
  position: fixed; /* Set the navbar to fixed position */
  z-index: 100;
  top: 0; /* Position the navbar at the top of the page */
  left: 0;
  width: 100%; /* Full width */
  column-span: 100%;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  width: 10%;
  color: #000000;
  text-align: center;
  padding: 14px 16px;
  padding-left: 0;
font-family: 'DM Sans', sans-serif;
text-decoration: none; 

}

.navbar a:hover {
 
  color: orangered;
    transition-duration: 0.5s

}



.btn:hover {
  background-color: #ddd;
}

.btn.active {
  background-color: #666;
  color: white;
}




.title1{
  width: 55%;
  float: left;
  font-family: forma-djr-display, sans-serif;
font-weight: 200;
font-style: normal;
font-size: 40;
  box-sizing: border-box;

}

.title1:hover{
  color: lightgray;


}
.project1:hover{
        position: relative;

}

.project1 a {
  text-decoration: none;
  color: #000 ;

}



.project1 a:hover {
color: lightgray;
}

.preview-image {
  position: fixed;
  pointer-events: none;
  z-index: 1000;
  opacity: 0;
  width: 400px;
  height: auto;
  transition: opacity 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.title1 h2 {
  display: inline-flex;
  align-items: center;
  position: relative;
  transition: padding-right 0.3s ease;
}

.title1 h2::after {
  content: "↗";
  opacity: 0;
  transition: opacity 0.3s ease;
  font-size: 40px; 
  font-weight: 900; 
  transform: scale(1.2);
  margin-left: 3px;
  line-height: 1; 
  display: inline-block; 
}

.title1:hover h2::after {
  opacity: 1;
}



.project1:hover:after {

      z-index: 200;  
  content: url(images/preview-AM.png);  
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: none;
  margin: auto;
  justify-content: center;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

 @keyframes fadeInAnimation {
            0% {
                opacity: 0;
            }
            100% {
                opacity: 1;
            }
        }

.project2 a {
  text-decoration: none;
  color: #000 ;
}

.project2 a:hover {
color: lightgray;
}


.project2:hover:after {
     
    z-index: 200; 
  content: url(images/preview-ODI.png);  
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: none;
  margin: auto;
  justify-content: center;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.project3 a {
  text-decoration: none;
  color: #000 ;
}
.project3 a:hover {
color: lightgray;
}


.project3:hover:after {
     z-index: 200;  
  content: url(images/preview-sam.png); 
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: none;
  margin: auto;
  justify-content: center;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.project4 a {
  text-decoration: none;
  color: #000 ;
}
.project4 a:hover {
color: lightgray;
}


.project4:hover:after {
     z-index: 200;  
  content: url(images/preview-IMDb.png); 
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: none;
  margin: auto;
  justify-content: center;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}


.project5 a {
  text-decoration: none;
  color: #000 ;
}
.project5 a:hover {
color: lightgray;
}

.project5:hover:after {
    

 z-index: 200; 
  content: url(images/preview1.png);  
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: none;
  margin: auto;
  justify-content: center;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.tags1{
  width: 25%;
  float: right;
  font-family: prestige-elite-std, monospace;
font-style: normal;
font-weight: 400;
padding-top: 50px;
  box-sizing: border-box;
}


.project6 a {
  text-decoration: none;
  color: #000 ;
}
.project6 a:hover {
color: lightgray;
}

.project6:hover:after {
    z-index: 200;  
  content: url(images/preview-syn.png);  
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: none;
  margin: auto;
  justify-content: center;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.tags1{
  width: 25%;
  float: right;
  font-family: prestige-elite-std, monospace;
font-style: normal;
font-weight: 400;
padding-top: 50px;
  box-sizing: border-box;
}



.project7 a {
  text-decoration: none;
  color: #000 ;
}
.project7 a:hover {
color: lightgray;
}

.project7:hover:after {

 z-index: 200;  
  content: url(images/preview3.png);  
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: none;
  margin: auto;
  justify-content: center;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.tags1{
  width: 25%;
  float: right;
  font-family: prestige-elite-std, monospace;
font-style: normal;
font-weight: 400;
padding-top: 50px;
  box-sizing: border-box;
}


.project8 a {
  text-decoration: none;
  color: #000 ;
}
.project8 a:hover {
color: lightgray;
}

.project8:hover:after {

 z-index: 200;  
  content: url(images/preview2.png);  
  animation: fadeInAnimation ease 0.5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  display: none;
  margin: auto;
  justify-content: center;
  position: fixed;
  margin: 0;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.tags1{
  width: 25%;
  float: right;
  font-family: prestige-elite-std, monospace;
font-style: normal;
font-weight: 400;
padding-top: 50px;
  box-sizing: border-box;
}



.footer {
   position: fixed;
   left: 40;
   bottom: 0;
   width: 100%;
   background-color: white;
   color: black;
   text-align: left;
   font-family: 'DM Sans', sans-serif;
   font-size: .7rem;

}


hr.solid::after {
  content: '';
    border-top: 2px solid #000;
  width: 90%;
  z-index: 50;
  position: absolute;
  top: 50%;
  left: 45;
}


/*---project1----*/



.title{
font-family: forma-djr-display, sans-serif;
font-weight: 100;
font-style: normal;
font-size: 30;
line-height: 55px;
letter-spacing: .2rem;
}

.tags{
font-family: prestige-elite-std, monospace;
font-style: normal;
font-weight: 400;

}






/*----gallery

div.gallery {
  margin: 25px;
  float: left;
  width: 10%;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
-----*/

@media screen and (max-width: 600px) {
  .preview-image {
    display: none;
  }
}

@media screen and (max-width: 600px) {
  .title1 {
    width: 100%;
    float: center;
    padding-bottom: 0;
    font-size: 30;
    padding-right: 10px;
  }


hr{
  padding: none;
}
  .tags1{
  width: 100%;
  float: right;
  font-family: prestige-elite-std, monospace;
font-style: normal;
font-weight: 400;
  box-sizing: border-box;
  padding-bottom: 50px;
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}


.navbar {
  overflow: hidden;
 background-color: #fff; 
  position: fixed; /* Set the navbar to fixed position */
  z-index: 100;
  top: 0; /* Position the navbar at the top of the page */
  left: 0;
  width: 100%; /* Full width */
  column-span: 100%;
}

/* Links inside the navbar */
.navbar a {
  float: left;
  display: block;
  width: 10%;
  text-align: center;
  padding: 14px 16px;
  padding-left: 30px;
font-family: 'DM Sans', sans-serif;
text-decoration: none; 

}



.project1:hover:after {
    

        display: none;
   
}

.project2:hover:after {
    

        display: none;
   
}

.project3:hover:after {
    

        display: none;
   
}
.project4:hover:after {
    

        display: none;
   
}
.project5:hover:after {
    

        display: none;
   
}
.project6:hover:after {
    

        display: none;
   
}
}


.projectelements{
width: 50%;
font-family: prestige-elite-std, monospace;
font-style: normal;
font-weight: 400;

}


.bottomwrap{
  margin-left: 80%;
  z-index: 50;
  bottom: 20px;
  padding-top: 100px;
}

.bottomwrap a{

  text-decoration: none;
  font-family: 'DM Sans', sans-serif;
  color: black;
  font-size: .8rem;

}

.bottomwrap a:hover{


  color: lightgray;

}


/* Add to your styleport.css file */


/* Option 1: Corner Ribbon */
.featured-ribbon {
  position: absolute;
  top: 20px;
  right: -35px;
  width: 150px;
  background: #2d3436;
  color: white;
  text-align: center;
  transform: rotate(45deg);
  padding: 5px 0;
  font-size: 14px;
  font-weight: 500;
  z-index: 1;
}

/* Option 2: Clean Tag */
.featured-tag {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #111111;
  color: white;
  padding: 6px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  font-family: sans-serif;
}

/* Gradient Banner */
.featured-gradient {
  position: absolute;
  top: 15px;
  left: 0;
  background: linear-gradient(45deg, #6c5ce7, #00cec9);
  color: white;
  padding: 6px 15px;
  font-size: 12px;
  font-weight: 500;
  z-index: 1;  /* Added z-index */
}

/* Outlined Tag */
.featured-outlined {
  position: absolute;
  top: 15px;
  right: 15px;
  border: 2px solid #2d3436;
  color: #2d3436;
  padding: 5px 12px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  z-index: 1;  /* Added z-index */
}

/* Pill Badge */
.featured-pill {
  position: absolute;
  top: 15px;
  left: 15px;
  background: #2d3436;
  color: white;
  padding: 6px 15px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 5px;
  z-index: 1;  /* Added z-index */
}

/* added*/
.project1, .project2, .project3, .project4, .project5, .project6, .project7, .project8 {
  position: relative;
  overflow: visible;  /* Changed from hidden to visible */
  
  clear: both;         /* Ensure proper stacking */
}

/* Increased z-index for all banners */
.featured-ribbon, .featured-tag, .featured-gradient, .featured-outlined, .featured-pill {
  z-index: 10;  /* Increased z-index */
}



/* Add a semi-transparent overlay when hovering */
.main::after {
    display: none;

  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);  /* Semi-transparent white */
  z-index: 150;  /* Between content and preview image */
  opacity: 0;
  pointer-events: none;  /* Lets clicks go through */
  transition: opacity 0.3s ease;
}

/* Show overlay when hovering over projects */
.project1:hover ~ .main::after,
.project2:hover ~ .main::after,
.project3:hover ~ .main::after,
.project4:hover ~ .main::after,
.project5:hover ~ .main::after,
.project6:hover ~ .main::after,
.project7:hover ~ .main::after,
.project8:hover ~ .main::after {
  opacity: 1;
}

/*----gallery

div.gallery {
  margin: 5px;
  float: left;
  width: 15%;
}

div.gallery:hover {
  border: 1px solid #777;
}

div.gallery img {
  width: 100%;
  height: auto;
}

div.desc {
  padding: 15px;
  text-align: center;
}
-----*/

}